<template>
  <div>
    <!-- 表单设计编辑 -->
    <div v-if="formType === 1">
      <a-input-number
        v-model:value="setting.options.defaultValue"
        :disabled="setting.options.disabled"
        :style="{ width: setting.options.width + '%' }"
      ></a-input-number>
    </div>
    <!-- 表单展示 -->
    <div v-else>
      <!-- 表单展示编辑 -->
      <div v-if="setting.fieldState === 0">
        <a-input-number
          v-if="setting.type == 'number'"
          :disabled="setting.options.disabled"
          :style="{ width: setting.options.width + '%' }"
          :max="setting.options.max"
          :min="setting.options.min"
          :placeholder="setting.options.placeholder"
          v-model:value="dataModel"
          @blur="buleEvent"
        ></a-input-number>
      </div>
      <!-- 表单展示只读 -->
      <div v-else>
        <a-input v-model="dataModel" disabled style="color: #595959; background-color: #fff; border: none"> </a-input>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      dataModel: this.models[this.setting.table + '-' + this.setting.field],
    }
  },

  props: {
    formType: {
      type: Number,
      default: 0,
    },
    setting: {
      type: Object,
      default: null,
    },

    models: {
      type: Object,
      default: Object,
    },
  },
  created() {},
  methods: {
    buleEvent(){
      this.$emit('totalNumber')
    }
  },
  watch: {
    dataModel: {
      deep: true,
      handler(val) {
        this.models[this.setting.table + '-' + this.setting.field] = val
      },
    },
  },
}
</script>